<template>
    <div>
        <el-row>
            <el-col :span="1" class="labelCol">
                <p class="labelText">车系:</p>
            </el-col>
            <el-col :span="3">
                <el-select size="small" v-model="queryData.series" placeholder="车系" clearable>
                    <el-option v-for="item in seriesCombo" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-col>

            <el-col :span="1" class="labelCol">
                <p class="labelText">排量:</p>
            </el-col>
            <el-col :span="3">
                <el-select size="small" v-model=" queryData.pl" placeholder="排量" clearable>
                    <el-option v-for="item in plCombo" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-col>

            <el-col :span="1" class="labelCol">
                <p class="labelText">车龄:</p>
            </el-col>
            <el-col :span="3">
                <el-select size="small" v-model="queryData.age" placeholder="车龄" clearable>
                    <el-option v-for="item in carAgeCombo" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-col>
            <el-col :span="1" class="labelCol">
                <p class="labelText">等级:</p>
            </el-col>
            <el-col :span='3'>
                <el-select v-model="queryData.level" size="small" placeholder=" " clearable>
                    <el-option v-for="item in levelCombo" :label="item.label" :value="item.value">

                    </el-option>
                    <el-option label="无" value="无"></el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="1" class="labelCol">
                <p class="labelText">SA:</p>
            </el-col>
            <el-col :span='3'>
                <el-select v-model="queryData.sa" size="small" placeholder="SA" clearable>
                    <el-option v-for="item in saCombo" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="1" class="labelCol">
                <p class="labelText">车牌:</p>
            </el-col>
            <el-col :span="3">

                <el-input size="small" v-model="queryData.plateNum" style="width: 90%;" placeholder="车牌">
                </el-input>
            </el-col>
            <el-col :span="1" class="labelCol">
                <p class="labelText">VIN:</p>
            </el-col>
            <el-col :span="3">
                <el-input size="small" v-model="queryData.vin" style="width: 90%;" placeholder="VIN">
                </el-input>
            </el-col>
            <el-col :span="1" class="labelCol">
                <p class="labelText">建议:</p>
            </el-col>
            <el-col :span="3">
                <el-select size="small" v-model="queryData.advise" placeholder="可提升建议" clearable>
                    <el-option v-for="item in adviseCombo" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" size="small" @click='queryPage'>查询</el-button>

            </el-col>
        </el-row>
        <!-- 表格列表区 -->
        <el-row>
            <el-col :span="18">

                <!--表格 -->
                <el-table :data="tableData.dataList" style="width: 100%">
                    <el-table-column prop="uName" label="SA">
                    </el-table-column>
                    <el-table-column prop="series" label="车系">
                    </el-table-column>
                    <el-table-column prop="displacement" label="排量">
                    </el-table-column>
                    <el-table-column prop="carAgeYear" label="车龄">
                    </el-table-column>
                    <el-table-column prop="vin" label="VIN">
                    </el-table-column>
                    <el-table-column prop="plateNum" label="车牌">
                    </el-table-column>
                    <el-table-column prop="ownerName" label="车主">
                    </el-table-column>
                    <el-table-column prop="totalScore" label="分数">
                    </el-table-column>
                    <el-table-column prop="carLevel" label="等级">
                    </el-table-column>
                    <el-table-column prop="" label="操作">
                        <template scope="scope">
                            <el-button @click.native.prevent="showAdvise(scope.$index, tableData.dataList)" type="success" size="small">
                                建议
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination small @current-change="pageChange" :current-page="curPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
                </el-pagination>
            </el-col>
            <el-col :span="6">
                <el-row>
                    <div>
                        <div id="carVolum" :style="{width:'100%',height:'350px'}"></div>
                    </div>
                </el-row>
                <!--饼状图 -->
                <el-row>
                    <div>
                        <div id="carAire" :style="{width:'100%',height:'350px'}"></div>
                    </div>
                </el-row>

            </el-col>
        </el-row>

        	<el-dialog title="车辆建议" v-model="adviseDialogShow"  style="wdith:800!important;">
 <el-button type="primary" size="small" @click='addContact'>新增维系</el-button>
                 <el-table :data="adviseData" style="width: 100%"  border>
                    <el-table-column width="180" prop="curLevel" label="当前状态">
                    </el-table-column>
                    <el-table-column width="120" prop="curScore" label="当前值">
                    </el-table-column>
                    <el-table-column  width="180" prop="targetLevel" label="目标状态">
                    </el-table-column>
                    <el-table-column  width="120" prop="targetScore" label="目标值">
                    </el-table-column>

                    <el-table-column width="100" prop="task" label="任务" >
                     <template scope="scope">
                           <el-tag type="success" v-if="scope.row.task=='任务'">{{scope.row.task}}</el-tag>
                        </template>
                    </el-table-column>
                     <el-table-column prop="advise"  width="360" label="建议" fixed>
                    </el-table-column>
                </el-table>
            </el-dialog>
        <concat :rowData="concatData" :show="concatShow" v-if="concatShow" ></concat>
    </div>
</template>

<script>
export default {
  //基础数据
  data: function() {
    return {
      companyId: window.localStorage.getItem("companyId"),
      // 查询条件——选项
      saCombo: [],
      seriesCombo: [],
      plCombo: [
        { label: "1.0L", value: "1.0L" },
        { label: "1.2L", value: "1.2L" },
        { label: "1.4L", value: "1.4L" },
        { label: "1.5L", value: "1.5L" },
        { label: "1.6L", value: "1.6L" },
        { label: "1.8L", value: "1.8L" },
        { label: "2.0L", value: "2.0L" },
        { label: "2.4L", value: "2.4L" },
        { label: "3.0L", value: "3.0L" },
        { label: "3.6L", value: "3.6L" },
        { label: "1.0T", value: "1.0T" },
        { label: "1.2T", value: "1.2T" },
        { label: "1.4T", value: "1.4T" },
        { label: "1.5T", value: "1.5T" },
        { label: "1.6T", value: "1.6T" },
        { label: "1.8T", value: "1.8T" },
        { label: "2.0T", value: "2.0T" },
        { label: "2.4T", value: "2.4T" },
        { label: "3.0T", value: "3.0T" },
        { label: "3.6T", value: "3.6T" }
      ],
      carAgeCombo: [],
      levelCombo: [],
      //提升建议
      adviseCombo: [
        { label: "延保", value: "延保" },
        { label: "续保", value: "续保" },
        { label: "会员", value: "会员" },
        { label: "储值", value: "储值" }
      ],
      // 查询条件——结查
      queryData: {
        sa: "",
        vin: "",
        plateNum: "",
        series: "",
        pl: "",
        age: "",
        level: "",
        advise: ""
      },
      //列表
      tableData: {
        total: 0,
        dataList: []
      },
      page: this.page,
      curPage: 1,
      //分页

      //图表
      pieChartData: [],
      realChartData: [],
      targetChartData: [],

      //建议
      adviseDialogShow: false,
      adviseData: [],
      //维系记录
      concatData: {},
      concatShow: false
    };
  },
  //方法
  methods: {
    // 分页查询数据
    queryPage: function() {
      this.$data.realCharData = [];
      this.$data.pieChartData = [];
      this.$http
        .post(this.API_ROOT + "/market/car/level/page", this.$data.queryData, {
          params: {
            start: this.$data.CurentPage,
            limit: this.$data.page.pageSize,
            companyId: this.$data.companyId
          }
        })
        .then(
          resp => {
            if (resp.data.success) {
              resp.data.total = parseInt(resp.data.total);
              this.$data.tableData.dataList = resp.data.dataList;
              this.$data.tableData.total = resp.data.total;
              this.$http
                .post(
                  this.API_ROOT + "/market/car/level/pie",
                  this.$data.queryData,
                  {
                    params: {
                      start: this.$data.CurentPage,
                      limit: this.$data.page.pageSize,
                      companyId: this.$data.companyId
                    }
                  }
                )
                .then(
                  resp => {
                    if (resp.data.success) {
                      this.$data.pieChartData = resp.data.dataList;

                      this.$http
                        .post(
                          this.API_ROOT + "/market/car/level/line",
                          this.$data.queryData,
                          {
                            params: {
                              start: this.$data.CurentPage,
                              limit: this.$data.page.pageSize,
                              companyId: this.$data.companyId
                            }
                          }
                        )
                        .then(
                          resp => {
                            if (resp.data.success) {
                              this.$data.realCharData = resp.data.dataList;
                              this.mounteds();
                            } else {
                              this.$message.error(resp.data.msg);
                            }
                          },
                          resp => {}
                        );
                    } else {
                      this.$message.error(resp.data.msg);
                    }
                  },
                  resp => {}
                );
            } else {
              this.$message.error(resp.data.msg);
            }
          },
          resp => {}
        );
    },
    //分页切换
    pageChange: function(change) {
      this.$data.curPage = change;
      this.queryPage();
    },

    //计算数据
    mounteds: function() {
      // 饼状图
      var myChart = this.echarts.init(document.getElementById("carAire"));
      var option = {
        title: {
          text: "等级占比",
          x: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          left: "right",
          data: ["A", "B", "C", "D", "E", "无"]
        },
        series: [
          {
            name: "等级占比",
            type: "pie",
            radius: "55%",
            //roseType: 'angle',
            data: this.$data.pieChartData
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      //柱状图
      var volumChart = this.echarts.init(document.getElementById("carVolum"));
      var volOption = {
        title: {
          text: "完成情况",
          x: "left"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          left: "right",
          data: ["目标值", "实际值"]
        },
        xAxis: [
          {
            type: "category",
            data: ["A", "B", "C", "D", "E", "无"],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "百分比",
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: "目标值",
            type: "line",
            data: this.$data.targetChartData
          },
          {
            name: "实际值",
            type: "bar",
            data: this.$data.realCharData
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      volumChart.setOption(volOption);
    },

    //字典加载
    loadDict: function() {
      debugger;
      //车系
      this.$http
        .get(this.API_ROOT + "/base/car/combo", {
          params: {
            companyId: this.$data.companyId
          }
        })
        .then(
          response => {
            // success callback
            this.$data.seriesCombo = response.data;
          },
          response => {
            // error callback
          }
        );

      this.$http
        .get(this.API_ROOT + "/bc/custome/level/combo", {
          params: {}
        })
        .then(
          resp => {
            debugger;
            this.$data.levelCombo = resp.data;
          },
          resp => {}
        );

      this.$http
        .get(this.API_ROOT + "/base/dict/combo", {
          params: {
            group: "02030101"
          }
        })
        .then(
          response => {
            // success callback
            this.$data.carAgeCombo = response.data;
          },
          response => {
            // error callback
          }
        );
      this.$http
        .get(this.API_ROOT + "/rbac/user/combo", {
          params: {
            role: "sa"
          }
        })
        .then(
          response => {
            // success callback
            this.$data.saCombo = response.data;
          },
          response => {
            // error callback
          }
        );

      this.$http
        .get(this.API_ROOT + "/bc/custome/level/conf/target", {
          params: {}
        })
        .then(
          response => {
            // success callback
            this.$data.targetChartData = response.data.dataList;
          },
          response => {
            // error callback
          }
        );
    },
    showAdvise: function(index, dataList) {
      this.$data.concatData = dataList[index];
      this.$http
        .get(this.API_ROOT + "/market/car/level/advise", {
          params: {
            id: dataList[index].id,
            companyId: window.localStorage.getItem("companyId")
          }
        })
        .then(
          resp => {
            debugger;
            this.$data.adviseData = resp.data.dataList;
          },
          resp => {}
        );
      this.$data.adviseDialogShow = true;
    },

    //新增维系记录
    addContact: function() {
      this.$data.concatShow = true;
    }
  },
  created: function() {
    this.loadDict();
  },

  mounted() {}
};
</script>
